<template>
  <div class="toolBox">
    <span class="title">工具:</span>
    <div class="btn-panel">
      <div
        class="btn-item"
        v-for="item in toolBoxList"
        :key="item.id"
        @mouseover="mouseHoveColor(item.id)"
        @mouseout="mouseOutColor"
        @click="clickItem(item.id)"
      >
        <el-tooltip effect="dark" :content="item.content" placement="bottom">
          <div class="btn-icon">
            <!-- <img src="@/assets/img/tool_locate.svg" alt=""> -->
            <SvgIcon
              :icon-class="item.icon"
              :class="[
                currentHoverId === item.id ? 'hoverColor' : 'originColor',
                clickIndex === item.id ? 'hoverColor' : 'originColor',
              ]"
            />
          </div>
        </el-tooltip>
      </div>
    </div>
    <clickInfoDialog
      ref="clickDialogRef"
      :info="clickInfo"
      :type="'locate'"
      :title="'点击位置的信息'"
      @close="closeDialog"
    ></clickInfoDialog>
    <clickInfoDialog
      ref="clickDialogRef2"
      :info="carmeraInfo"
      :type="'carmera'"
      :title="'获取当前视角参数'"
      @close="closeDialog2"
    >
    </clickInfoDialog>
  </div>
</template>
<style lang="scss">
.toolBox {
  position: absolute;
  left: 16px;
  top: 18px;
  height: 36px;
  padding: 5px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 18px;
  color: #ccc;
  background-color: #2b2c2f;
  border: 1px solid #606374;
  border-radius: 2px;
  z-index: 999;
  .btn-panel {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-left: 10px;

    .btn-item {
      margin: 0 6px;
      .btn-icon {
        width: 20px;
        height: 20px;
        line-height: 21px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.tool_icon {
  color: #606374;
  width: 20px;
  height: 20px;
}
.originColor {
  color: #606374;
  fill: #fff;
}
.hoverColor {
  color: #52ddff;
  fill: #52ddff;
}
</style>
<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import clickInfoDialog from "@/components/clickInfo.vue";
import { addTuguanListenter, removeTuguanListenter } from "@/utils/tgListen";
import { click } from "@/enums";
import {getInfo} from '@/utils/getInfo'
const currentHoverId = ref(-1);
const toolBoxList = ref([
  {
    id: 1,
    content: "获取经纬度",
    icon: "tool_locate",
  },
  {
    id: 2,
    content: "获取当前视角参数",
    icon: "tool_picture",
  },
  {
    id: 3,
    content: "绘制",
    icon: "tool_draw",
  },
]);
const clickIndex = ref(-1);
const clickDialogRef = ref(null);
const clickDialogRef2 = ref(null);
const clickInfo = ref({});
const carmeraInfo=ref({})
const clickItem = (id) => {
  if (clickIndex.value === -1) {
    switchById(id);
  } else if (clickIndex.value === id) {
    cancelById(id);
  }
};
const switchById = (id) => {
  switch (id) {
    case 1:
      ElMessage("请在模型区域点击，获取点击位置坐标！");
      clickIndex.value = id;
      addTuguanListenter(click["scence"], (event) => {
        clickDialogRef.value.open();
        clickInfo.value = event.data[0];
      });
      break;
    case 2:
      clickDialogRef2.value.open();
      getInfo(0,(result)=>{
        carmeraInfo.value=result
      })
      break;
    case 3:
      break;
  }
};
const cancelById = (id) => {
  switch (id) {
    case 1:
      ElMessage("已取消获取经纬度！");
      clickIndex.value = -1;
      break;
    case 2:
      break;
    case 3:
      break;
  }
};
const closeDialog = () => {
  currentHoverId.value = -1;
  clickIndex.value = -1;
  removeTuguanListenter(click["scence"]);
};
const closeDialog2 = () => {
  currentHoverId.value = -1;
  clickIndex.value = -1;
};
const mouseHoveColor = (id) => {
  if (clickIndex.value > -1) {
    return;
  }
  currentHoverId.value = id;
};
const mouseOutColor = () => {
  if (clickIndex.value > -1) {
    return;
  }
  currentHoverId.value = -1;
};
</script>
